<template>
  <div :style="bodyStyle"
       tabindex="0"
       @focus="focus"
       @blur="blur"
       class="virtually-table-ui-contextmenu webkit-scroll">
    <div class="contextmenu-item"
         :key="menu.name"
         v-for="menu in rightClickMenus">
      <div v-if="menu.type == 'line'"
           class="context-menu-line"></div>
      <div v-else-if="menu.customRender"
           class="context-menu-body"
           @click="menuClick($event, menu)">
        <renderDom :menu="menu"
                   :record="record" />
      </div>
      <div v-else
           class="context-menu-body"
           :class="[
          menu.type == 'checkBox' ? 'context-menu-body-checkbox' : 'context-menu-body-default'
        ]"
           @click="menuClick($event, menu)">
        <div v-if="menu.icon"
             class="menu-icon">
          <icon-font :type="menu.icon" />
        </div>
        <div v-if="menu.type == 'checkBox'"
             class="menu-checkBox">
          <a-checkbox style="pointer-events: none;"
                      :checked="menu.value"></a-checkbox>
        </div>
        <div class="menu-name"
             :title="menu.name">{{ menu.name }}</div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
  .webkit-scroll::-webkit-scrollbar-track-piece {
    width: 8px;
    background-color: #f5f5f5;
    border-radius: 6px;
  }
  .webkit-scroll::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  .webkit-scroll::-webkit-scrollbar-thumb {
    height: 50px;
    background: #bec7d5;
    border-radius: 6px;
  }
  .webkit-scroll::-webkit-scrollbar-thumb:hover {
    background: #91a0b5;
  }

  .webkit-scroll *::-webkit-scrollbar-track-piece {
    width: 8px;
    background-color: #f5f5f5;
    border-radius: 6px;
  }
  .webkit-scroll *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  .webkit-scroll *::-webkit-scrollbar-thumb {
    height: 50px;
    background: #bec7d5;
    border-radius: 6px;
  }
  .webkit-scroll *::-webkit-scrollbar-thumb:hover {
    background: #91a0b5;
  }
  .virtually-table-ui-contextmenu {
    background: white;
    position: absolute;
    width: 112px;
    background: #ffffff;
    box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px 0 #00000014, 0 9px 28px 8px #0000000d;
    border-radius: 2px;
    left: 0;
    top: 0;
    z-index: 100;
    overflow-y: auto;
    overflow-x: hidden;
    /*chrome下滚动条样式*/

    .contextmenu-item {
      width: 100%;
      color: #333333;
      &:hover {
        background: #f5f5f5 !important;
      }
      .context-menu-body {
        width: 100%;
        padding: 0 9px;
        box-sizing: border-box;
        display: flex;
        cursor: pointer;
        .menu-icon {
          font-size: 17px;
          color: #8c8c8c;
          margin-right: 4px;
          line-height: 34px;
        }
        .menu-checkBox {
          margin-right: 4px;
          display: flex;
          align-items: center;
        }
        .menu-name {
          flex: 1;
          overflow: hidden;
          line-height: 34px;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
      // .context-menu-body-checkbox {
      // }
      // .context-menu-body-default{
      //     cursor: pointer;
      // }
      .context-menu-line {
        width: 100%;
        height: 0;
        margin: 2px 0;
        border-bottom: 1px solid #f0f0f0;
      }
    }
  }
</style>
<script>
  import renderDom from './renderDom';

  export default {
    name: 'ui-contextmenu',
    components: { renderDom },
    props: {
      rightClickMenus: { type: Array },
      record: { type: Object },
      bodyStyle: { type: Object },
      closeContextmenuDom: { type: Function }
    },
    data() {
      return {
        timer: null
      };
    },
    mounted() {
      this.$nextTick(() => {
        this.$el.focus();
      });
    },
    methods: {
      focus() {
        console.log('focus:--->');
      },
      blur() {
        console.log('blur:--->');
        this.$nextTick(() => {
          this.closeContextmenuDom();
        });
      },
      menuClick(event, menu) {
        console.log('click:--->');
        if (menu.type == 'checkBox') {
          menu.value = !menu.value;
          // console.log('change:', menu.change);
          menu.change && menu.change(this.record, menu);
          // 重定向值
          if (menu.valueHandel) {
            menu.value = menu.valueHandel(this.record, menu);
          }
        } else {
          menu.click && menu.click(this.record, menu);
        }
        if (!menu.clickInterceptor || !menu.clickInterceptor(this.record, menu)) {
          this.blur();
        }
      }
    }
  };
</script>
